<template>
  <div>
    <div id='main'>
    </div>
  </div>

</template>

<script>
  export default {
    props:['datas'],
    data () {
      return {
        tabledata:[],
        tabledataya:[],
        tabledatayb:[],
        tabledatayc:[],
        tabledatayd:[],
        tabledataye:[],
        tabledataym:[],
      }
    },
    created() {
      //用于px转换rem，echarts读取不到rem，所以这里要换算
      var d = document.documentElement;
      var cw = d.clientWidth || 750;
      document.documentElement.style.fontSize = (cw/750 * 100) + 'px';
      this.getLoading()
    },
    mounted() {
      this.showCharts()
    },
    methods:{
      getLoading(){
        var that=this;
        that.tabledata=that.datas;
        let ag=that.tabledata;
        console.log(that.tabledata)
        that.tabledataya=[];//这是柱状图的数据,例:10
        that.tabledatayc=[];//这是y轴显示百分比的地方,例:10%
        that.tabledatayb=[];//这是y轴显示时间的地方,例：2h18
        that.tabledatayd=[];//这是y轴显示类目名称,例：'深睡眠'
        that.tabledataye=[];//这是区间最小数据
        that.tabledataym=[];//这是区间最大数据
        for(var i=0;i<ag.length;i++){
          that.tabledataya.push(ag[i].ya)//这是柱状图的数据
          that.tabledatayb.push(ag[i].yc)//这是y轴显示时间的地方
          that.tabledatayd.push(ag[i].yb)//这是y轴显示类目名称
          if(ag[i].yd.a1=='0'){
            ag[i].yd.a1='-'
          }
          if(ag[i].yd.a2=='0'){
            ag[i].yd.a2='-'
          }
          that.tabledataye.push(ag[i].yd.a1);//这是区间最小数据
          that.tabledataym.push(ag[i].yd.a2);//这是区间最大数据
          that.tabledatayc.push(ag[i].ya+'%')//这是y轴显示百分比的地方
        }

      },
      //rem转换px
      remToPx(rem) {
        var fontSize = document.documentElement.style.fontSize;
        return Math.floor(rem * fontSize.replace('px', ''));
      },
      showCharts(){
        this.getLoading()
        // 基于准备好的dom，初始化echarts实例,采用svg渲染
        var myChart = this.$echarts.init(document.getElementById('main'),null, {renderer: 'svg'});

        // 绘制图表
        var myColor = ['#e55355', '#f2a17f', '#99c3a0', '#e4ff00'];//这是图表颜色
        var option = {
          calculable:false,
          grid: {
            left: this.remToPx(0.3),
            top: '4%',
            right: this.remToPx(0.3),
            bottom: '8%',
            containLabel: true
          },
          backgroundColor: '#0f2e6f',
          xAxis: {
            show: false
          },
          yAxis: [{
            show: true,
            data: this.tabledatayd,
            inverse: true,
            boundaryGap:['6%','6%'],

            axisLine: {
              show: false
            },
            splitLine: {
              show: false
            },
            axisTick: {
              show: false
            },
            axisLabel: {
              textStyle: {
                color:"#ffffff",
                fontSize:this.remToPx(0.3),
              },

            },

          }, {
            show: true,
            inverse: true,
            data: this.tabledatayb,
            axisLabel: {
              textStyle: {
                color: "#ffffff"
              }
            },
            axisLine: {
              show: false
            },
            splitLine: {
              show: false
            },
            axisTick: {
              show: false
            },

          },
            {
              show: true,
              inverse: true,
              data: this.tabledatayc,
              offset:this.remToPx(0.7),//偏移量
              axisLabel: {
                textStyle: {
                  color:"#426ead",
                }
              },
              axisLine: {
                show: false
              },
              splitLine: {
                show: false
              },
              axisTick: {
                show: false
              },

            }],
          series: [
            {
              name: '中心轴',
              type: 'bar',
              hoverAnimation:false,
              yAxisIndex: 1,
              data: ['180','180','180','180'],
              barWidth: 1,
              itemStyle: {
                normal: {
                  barBorderRadius: this.remToPx(0.3),
                  color:"#315ab1"
                }
              },
              label: {
                show: false,
              },

            },
            {
              name: '外百分比',
              type: 'bar',
              hoverAnimation:false,
              yAxisIndex: 2,
              data: this.tabledataya,
              // barGap:"50%",
              barWidth: this.remToPx(0.18),
              itemStyle: {
                normal: {
                  barBorderRadius: this.remToPx(0.3),
                  color: function(params) {
                    var num = myColor.length;
                    return myColor[params.dataIndex % num]
                  },
                }
              },
              label: {
                normal: {
                  show: false,
                  position: 'inside',
                  formatter: '{c}%'
                }
              },
            },


            {
              name: '最小值',
              type: 'bar',
              stack: '最小值',
              label: {
                normal: {
                  show: true,
                  position: 'top'

                }
              },
              yAxisIndex: 0,
              barWidth: this.remToPx(0.22),
              itemStyle: {
                barBorderRadius: 20,
                normal: {
                  barBorderColor: 'rgba(0,0,0,0)',
                  color: 'rgba(0,0,0,0)'
                },
                emphasis: {
                  barBorderColor: 'rgba(0,0,0,0)',
                  color: 'rgba(0,0,0,0)'
                }
              },
              data: this.tabledataye,
            },
            {
              name: '最大值',
              type: 'bar',
              stack: '最小值',
              barGap:"-130%",
              barWidth: this.remToPx(0.28),
              label: {
                normal: {
                  show: true,
                  position: 'bottom'
                }
              },
              itemStyle: {
                barBorderRadius: 20,
                color:'rgba(0,0,0,0)',
                borderColor:'#54b821',

              },
              data: this.tabledataym,
            },
          ]
        };

        // 使用刚指定的配置项和数据显示图表。
        myChart.setOption(option);
      }
    }
  }
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
  body{
    -webkit-user-select:none;
    -moz-user-select:none;
    -ms-user-select:none;
    user-select:none;
  }
  #main{
    width:100%;height:3.8rem;float:left;-webkit-user-select:none;
    -moz-user-select:none;
    -ms-user-select:none;
    user-select:none;
  }
</style>
